<template>
	<view class="shopping">
		<diy-scorll :Empty='goodsList.length ? false : true' :status = 'status' @scrolltolower='getgoods' @refresherrefresh='refresherrefresh'>
			<view class="diy-swiper u-skeleton-rect">
				<u-swiper :list="list" height='320' :autoplay="false"></u-swiper>
			</view>
			<view class="box-scroll">
				<scroll-view :scroll-x='true' class="select u-skeleton-rect">
					<view class="item" v-for="(item,index) in TypeList" :key="index" @click="$util.redirectTo('/pages/shopping/goodslist',{id:item.id})">
						<image :src="$util.img(item.image)" mode=""></image>
						<view class="title">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			
			<diy-goods :list='goodsList' @getgoods='getgoods'></diy-goods>
		</diy-scorll>
		<diy-tabbar current="shopping"></diy-tabbar>
		<!-- <diy-shoping-tips  :show='loginShow' @callback='()=>loginShow = false'></diy-shoping-tips> -->
	</view>
</template>

<script>
	import diyShopingTips from "../../components/diy-shoping-tips/diy-shoping-tips.vue"
	export default {
		components:{
			diyShopingTips
		},
		data(){
			return {
				//轮播图列表
				list: [],
				//弹窗出现
				loginShow:true,
				//加载配置
				page:{
					page:1,
					page_size:8,
				},
				//商品列表
				goodsList:[],
				//判断刷新出来滚动出现的文字
				status:'loadmore',
				//商品分类列表
				TypeList:[]
			}
		},
		onLoad() {
			this.getswiper();
			this.goodsTypeList();
		},
		methods:{
			// 下拉双薪
			refresherrefresh(callback){
				this.page = {
					page:1,
					page_size:8,
				},
				this.getswiper();
				this.goodsTypeList();
				this.getgoods(callback);
			},
			// 或许商品列表
			getgoods(callback){
				this.$http.asyncSendrequest({
					url:'/goods/goodsList',
					data:{
						type:1,
						...this.page
					},
					success:res=>{
						if(res.code == '0') {
							if(this.page.page == 1) this.goodsList = [];
							if(res.data.length){
								this.goodsList = this.goodsList.concat(res.data);
								this.page.page += 1;
							} else {
								//下面加载的文字
								this.status = 'nomore';
							}
							if(typeof callback == 'function') callback();
							this.loding = false;
						}
					}
				})
			},
			//获取轮播图
			getswiper(){
				this.$http.asyncSendrequest({
					url:'/common/banner',
					data:{
						type:2
					},
					success:res=>{
						if(res.code == '0') {
							this.list = res.data.map(item=>{
								item.image = item.icon;
								return item ;
							});
						}
					}
				})
			},
			//获取商品分类
			goodsTypeList(){
				this.$http.asyncSendrequest({
					url:'/goods/goodsTypeList',
					success:res=>{
						if(res.code == '0') {
							this.TypeList = res.data;
						}
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.shopping{
		padding: 58rpx 0 140rpx;
		width: 100%;
		height: 100vh;
		.diy-swiper{
			margin: 0 30rpx 44rpx;
		}
		.box-scroll{
			width: 100%;
			padding: 0 30rpx;
			overflow: hidden;
			.select{
				white-space: nowrap;
				margin:0 0 54rpx;
				// padding:0 30rpx;
				.item{
					display: inline-block;
					text-align: center;
					margin-right: 32rpx;
					image{
						width:80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					.title{
						min-width: 100rpx;
					}
				}
				.item:last-child{
					padding-right: 30rpx;
				}
			}
		}
		
	}
</style>